<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <div class="wrapper"></div>
  </body>
  <script>
    console.log(document.getElementById("app"));
    console.dir(document.getElementById("app"));
    console.log(document.querySelector("#app"));
    console.log(document.querySelector(".wrapper"));
    console.log(document.querySelector("div"));
    console.log(document.querySelectorAll("div"));
    // const createdDiv = document.createElement("div");
    // const stringContent = document.createTextNode("这是一个div");
    // createdDiv.appendChild(stringContent);
    // document.querySelector("#app").appendChild(createdDiv);
    document.querySelector("#app").innerHTML = "<div>这里是一个div</div>";

    const menu = [
      "宫保鸡丁",
      "鱼香肉丝",
      "麻辣香锅",
      "回锅肉",
      "北京烤鸭",
      "红烧肉",
      "小龙虾",
      "酸菜鱼",
      "辣子鸡",
      "蒜蓉粉丝蒸虾",
    ];
    let domResult = "";
    menu.forEach((item) => {
      let dom = `<div>${item}</div>`;
      domResult = domResult + dom;
    });
    document.querySelector("#app").innerHTML = domResult;
  </script>
</html>
